<!-- 拖拽组件官网 -->
<!-- http://www.itxst.com/vue-draggable/zyrqie7f.html -->
<template>
  <div class="formDiv">
    <div class="nav">
      <breadcrumb :list="navList"></breadcrumb>
    </div>
    <transition name="el-zoom-in-top">
      <div :class="city == 1 ? 'dragDemo' : 'dragDemo m'">
        <!--列表1-->
        <draggable
          class="listLeft"
          element="div"
          v-model="listLeft"
          :options="dragOptions1"
          :move="onMove"
          @start="isDragging = true"
          @end="isDragging = false"
        >
          <div class="li" v-for="(item, key) in listLeft" :key="key">
            <span>{{ item.name }}</span>
            <i
              v-if="item.value == 'inputText'"
              class="iconfont icon-danhangshurukuang"
            ></i>
            <i
              v-else-if="item.value == 'textarea'"
              class="el-icon-s-unfold"
            ></i>
            <i
              v-else-if="item.value == 'select'"
              class="el-icon-caret-bottom"
            ></i>
            <i
              v-else-if="item.value == 'checkbox'"
              class="iconfont icon-duoxuankuang"
            ></i>
            <i
              v-else-if="item.value == 'radio'"
              class="iconfont icon-danxuankuangxuanzhong"
            ></i>
            <i v-else-if="item.value == 'switch'" class="el-icon-open"></i>
            <i
              v-else-if="item.value == 'formDataTime'"
              class="iconfont icon-29"
            ></i>
            <i
              v-else-if="item.value == 'personnel'"
              class="iconfont icon-renyuanxuanze"
            ></i>
            <i
              v-else-if="item.value == 'upImg'"
              class="el-icon-picture-outline"
            ></i>
            <i
              v-else-if="item.value == 'upFolder'"
              class="iconfont icon-shangchuanfujian"
            ></i>
            <i v-else class="iconfont icon-fuwenben"></i>
          </div>
        </draggable>
        <!--PC后台列表-->
        <div class="sutoScroll" v-show="city == 1">
          <draggable
            class="list-group layui-form"
            element="div"
            v-model="listRight"
            :options="dragOptions2"
            :move="onMove"
            :scroll="true"
            @start="rightStart"
            @add="addList"
            @end="rightEnd"
            v-show="city == 1"
          >
            <div
              :class="listCurShu == key ? 'li cur' : 'li'"
              v-for="(item, key) in listRight"
              :key="key"
              @click="listCur(key)"
            >
              <!-- element ui -->
              <!-- 单行输入框 -->
              <div
                class="ele-form-item"
                :class="item.value + 'Pc'"
                v-if="item.value == 'inputText'"
              >
                <div class="ele-input-block">
                  <el-form label-width="100px">
                    <el-form-item :label="item.name">
                      <el-input
                        type="text"
                        name="title"
                        :placeholder="item.placeholder"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <!-- 多行输入框 -->
              <div class="ele-form-item" v-else-if="item.value == 'textarea'">
                <div class="ele-input-block">
                  <el-form label-width="100px">
                    <el-form-item :label="item.name">
                      <el-input
                        type="textarea"
                        resize="none"
                        :rows="4"
                        :placeholder="item.placeholder"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <!-- 下拉列表 -->
              <div class="ele-form-item" v-else-if="item.value == 'select'">
                <div class="ele-input-block">
                  <el-form label-width="100px">
                    <el-form-item :label="item.name">
                      <el-select
                        style="width:100%"
                        :placeholder="item.placeholder"
                      >
                        <el-option label="选项1" value="0"></el-option>
                        <el-option label="选项2" value="1"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <!-- 多选框 -->
              <div class="ele-form-item" v-else-if="item.value == 'checkbox'">
                <div class="ele-input-block">
                  <el-form label-width="100px">
                    <el-form-item :label="item.name">
                      <el-checkbox-group v-model="checkList">
                        <el-checkbox label="复选框 A"></el-checkbox>
                        <el-checkbox label="复选框 B"></el-checkbox>
                        <el-checkbox label="选中且禁用" disabled></el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <!-- 单选框 -->
              <div class="ele-form-item" v-else-if="item.value == 'radio'">
                <div class="ele-input-block">
                  <el-form label-width="100px">
                    <el-form-item :label="item.name">
                      <el-radio-group>
                        <el-radio :label="3">备选项</el-radio>
                        <el-radio :label="6">备选项</el-radio>
                        <el-radio :label="9">备选项</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <!-- 开关按钮 -->
              <div class="ele-form-item" v-else-if="item.value == 'switch'">
                <div class="ele-input-block">
                  <el-form label-width="100px">
                    <el-form-item :label="item.name">
                      <el-switch
                        active-color="#13ce66"
                        inactive-color="#dcdfe6"
                      ></el-switch>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <!-- 日期 -->
              <div
                class="ele-form-item"
                v-else-if="item.value == 'formDataTime'"
              >
                <div class="ele-input-block">
                  <el-form label-width="100px">
                    <el-form-item :label="item.name">
                      <el-date-picker
                        style="width:100%"
                        type="date"
                        :placeholder="item.placeholder"
                      ></el-date-picker>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <!-- 人员选择 -->
              <div class="ele-form-item" v-else-if="item.value == 'personnel'">
                <div class="ele-input-block">
                  <el-form label-width="100px">
                    <el-form-item :label="item.name">
                      <el-input
                        placeholder="请选择人员"
                        class="input-with-select"
                      >
                        <el-button slot="append">{{
                          item.placeholder
                        }}</el-button>
                      </el-input>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <!-- 图片上传 -->
              <div class="ele-form-item" v-else-if="item.value == 'upImg'">
                <div class="ele-input-block">
                  <el-form label-width="100px">
                    <el-form-item :label="item.name">
                      <el-upload
                        class="upload-demo"
                        action="#"
                        list-type="picture"
                      >
                        <el-button
                          size="small"
                          icon="el-icon-plus"
                          type="primary"
                          >上传图片</el-button
                        >
                        <span slot="tip" class="el-upload__tip"
                          >只能上传jpg/png文件，{{ item.placeholder }}</span
                        >
                      </el-upload>
                      <div class="imgZw">
                        <span id="moren">图片预览</span>
                      </div>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <!-- 图片上传 -->
              <div class="ele-form-item" v-else-if="item.value == 'upFolder'">
                <div class="ele-input-block">
                  <el-form label-width="100px">
                    <el-form-item :label="item.name">
                      <el-upload
                        class="upload-demo"
                        action="#"
                        list-type="picture"
                      >
                        <el-button
                          size="small"
                          icon="el-icon-plus"
                          type="primary"
                          >上传附件</el-button
                        >
                        <span slot="tip" class="el-upload__tip">
                          {{ item.placeholder }}
                        </span>
                      </el-upload>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <!-- 富文本 -->
              <div class="ele-form-item" v-else-if="item.value == 'richText'">
                <div class="ele-input-block">
                  <el-form label-width="100px">
                    <el-form-item :label="item.name">
                      <TinymceEditor
                        ref="editor"
                        :disabled="disabled"
                        :base-url="baseUrl"
                        :language="language"
                        :skin="skin"
                      />
                    </el-form-item>
                  </el-form>
                </div>
              </div>
              <i class="el-icon-error delIcon" @click="delLi(key)"></i>
            </div>
          </draggable>
        </div>
        <!--移动端列表-->
        <div class="Mbj" v-show="city == 2">
          <draggable
            class="list-group0"
            element="div"
            v-model="listRight"
            :options="dragOptions2"
            :move="onMove"
            @start="rightStart"
            @add="addList"
            @end="rightEnd"
          >
            <div
              :class="listCurShu == key ? 'li cur' : 'li'"
              v-for="(item, key) in listRight"
              :key="key"
              @click="listCur(key)"
            >
              <!-- 单行输入框 -->
              <div
                class="inputText"
                :class="item.value + 'Pc'"
                v-if="item.value == 'inputText'"
              >
                <span class="t">{{ item.name }}</span>
                <span class="placeholder">{{ item.placeholder }}</span>
              </div>
              <!-- 多行输入框 -->
              <div class="textarea" v-else-if="item.value == 'textarea'">
                <span class="t">{{ item.name }}</span>
                <p class="placeholder">{{ item.placeholder }}</p>
              </div>
              <!-- 下拉列表 -->
              <div class="inputText" v-else-if="item.value == 'select'">
                <span class="t">{{ item.name }}</span>
                <span class="placeholder">
                  {{ item.placeholder }}
                  <i class="layui-icon">&#xe625;</i>
                </span>
              </div>
              <!-- 多选框 -->
              <div class="inputText" v-else-if="item.value == 'checkbox'">
                <span class="t">{{ item.name }}</span>
                <span class="placeholder">
                  {{ item.placeholder }}
                  <i class="layui-icon">&#xe625;</i>
                </span>
              </div>
              <!-- 单选框 -->
              <div class="inputText" v-else-if="item.value == 'radio'">
                <span class="t">{{ item.name }}</span>
                <span class="placeholder">
                  {{ item.placeholder }}
                  <i class="layui-icon">&#xe625;</i>
                </span>
              </div>
              <!-- 开关按钮 -->
              <div class="inputText" v-else-if="item.value == 'switch'">
                <span class="t">{{ item.name }}</span>
                <span class="placeholder">
                  <img src="../../images/switch.jpg" />
                </span>
              </div>
              <!-- 日期 -->
              <div class="inputText" v-else-if="item.value == 'formDataTime'">
                <span class="t">{{ item.name }}</span>
                <span class="placeholder">
                  {{ item.placeholder }}
                  <i class="layui-icon">&#xe625;</i>
                </span>
              </div>
              <!-- 人员选择 -->
              <div class="inputText" v-else-if="item.value == 'personnel'">
                <span class="t">{{ item.name }}</span>
                <span class="placeholder">
                  {{ item.placeholder }}
                  <i class="layui-icon">&#xe625;</i>
                </span>
              </div>
              <!-- 图片上传 -->
              <div
                class="inputText"
                v-else-if="item.value == 'upImg'"
                style="margin-bottom: 10px;"
              >
                <span class="t">
                  {{ item.name }}
                  <span style=" font-size: 12px;color: #999;"
                    >（{{ item.placeholder }}）</span
                  >
                </span>
                <span class="placeholder">
                  <i class="layui-icon Upimg">&#xe60d;</i>
                </span>
              </div>
              <!-- 附件上传 -->
              <div
                class="inputText"
                v-else-if="item.value == 'upFolder'"
                style="margin-bottom: 10px;"
              >
                <span class="t">
                  {{ item.name }}
                  <span style=" font-size: 12px;color: #999;"
                    >（{{ item.placeholder }}）</span
                  >
                </span>
                <span class="placeholder">
                  <i class="layui-icon Upimg">&#xe608;</i>
                </span>
              </div>

              <div v-else class="layui-form-item">
                {{ item.name }}
                <div>
                  <TinymceEditor
                    ref="editor"
                    :disabled="disabled"
                    :base-url="baseUrl"
                    :language="language"
                    :skin="skin"
                  />
                </div>
              </div>
              <i class="layui-icon delIcon" @click="delLi(key)">&#x1007;</i>
            </div>
          </draggable>
        </div>
        <div class="configure layui-form">
          <div
            v-for="(item, key) in listRight"
            :key="key"
            v-show="listCurShu == key"
          >
            <!-- 单行输入框 -->
            <div
              class="inputText"
              :class="item.value + 'm'"
              v-if="item.value == 'inputText' || item.value == 'textarea'"
              style="margin-top:15px;"
            >
              <el-form ref="form" label-width="120px">
                <el-form-item label="字段名称">
                  <el-input
                    type="text"
                    v-model="item.name"
                    placeholder="请输入字段名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="提示语">
                  <el-input
                    type="text"
                    v-model="item.placeholder"
                    placeholder="请输入提示语"
                  ></el-input>
                </el-form-item>
                <el-form-item label="必填">
                  <el-switch
                    v-model="item.switch"
                    active-color="#13ce66"
                    inactive-color="#dcdfe6"
                  ></el-switch>
                </el-form-item>
                <el-form-item label="另存对象（自行处理）">
                  <el-input
                    type="text"
                    v-model="item.OBJECT_NAME"
                    placeholder
                  ></el-input>
                </el-form-item>
                <el-form-item label="另存对象字段（自行处理）">
                  <el-input
                    type="text"
                    v-model="item.OBJECT_FIELD"
                    placeholder
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
            <!-- 单行输入框 -->
            <div
              class="inputText"
              :class="item.value + 'm'"
              v-else-if="item.value == 'select'"
            >
              <el-form ref="form" label-width="120px">
                <el-form-item label="字段名称">
                  <el-input
                    type="text"
                    v-model="item.name"
                    placeholder="请输入字段名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="提示语">
                  <el-input
                    type="text"
                    v-model="item.placeholder"
                    placeholder="请输入提示语"
                  ></el-input>
                </el-form-item>
                <el-form-item label="必填">
                  <el-switch
                    active-color="#13ce66"
                    inactive-color="#dcdfe6"
                  ></el-switch>
                </el-form-item>
                <el-form-item label="另存对象（自行处理）">
                  <el-input
                    type="text"
                    v-model="item.OBJECT_NAME"
                    placeholder
                  ></el-input>
                </el-form-item>
                <el-form-item label="另存对象字段（自行处理）">
                  <el-input
                    type="text"
                    v-model="item.OBJECT_FIELD"
                    placeholder
                  ></el-input>
                </el-form-item>
                <el-form-item label="选项来源">
                  <el-radio-group v-model="item.Object_Origin">
                    <el-radio :label="0">字面值</el-radio>
                    <el-radio :label="1">数据字典</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="字典类型">
                  <el-input
                    type="text"
                    v-model="item.DictType"
                    placeholder="填写字典类型名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="选项">
                  <el-input
                    type="text"
                    v-model="item.options"
                    placeholder="多个选项用逗号隔开"
                  ></el-input>
                </el-form-item>
                <el-form-item label="sql语句">
                  <el-input
                    type="text"
                    v-model="item.sqlLang"
                    placeholder
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div style="clear:both;"></div>
        <div class="footer">
          <div class="toggle-mode">
            <label for="">切换表单模式：</label>
            <el-select
              v-model="form.val"
              @change="handleChange"
              placeholder="请选择表单模式"
            >
              <el-option label="PC后台" value="1"></el-option>
              <el-option label="移动端" value="2"></el-option>
            </el-select>
          </div>
          <div class="btn-groups">
            <el-button type="primary" @click="onSubmit">保存表单</el-button>
            <el-button>取消</el-button>
          </div>
        </div>
      
      </div>
    </transition>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import TinymceEditor from "@/components/tinymce-editor"; //改成自己的文件夹
import breadcrumb from "@/components/breadcrumb.vue";
var form;
layui.use("form", function() {
  form = layui.form;
});
var dataList = [
  {
    name: "单行输入框",
    value: "inputText",
    placeholder: "请输入内容",
    switch: true,
    OBJECT_NAME: "",
    OBJECT_FIELD: ""
  },
  {
    name: "多行输入框",
    value: "textarea",
    placeholder: "请输入内容",
    switch: false,
    OBJECT_NAME: "",
    OBJECT_FIELD: ""
  },
  {
    name: "下拉列表",
    value: "select",
    placeholder: "点击选择",
    Object_Origin: 0, //选项来源
    DictType: "", //字典类型
    options: "", //选项
    sqlLang: "" //sql语句
  },
  {
    name: "多选框",
    value: "checkbox",
    placeholder: "点击选择"
  },
  {
    name: "单选框",
    value: "radio",
    placeholder: "点击选择"
  },
  {
    name: "开关按钮",
    value: "switch",
    placeholder: "点击选择"
  },
  {
    name: "日期",
    value: "formDataTime",
    placeholder: "点击选择时间"
  },
  {
    name: "人员选择",
    value: "personnel",
    placeholder: "点击选择人员"
  },
  {
    name: "上传图片",
    value: "upImg",
    placeholder: "大小不能超过8M"
  },
  {
    name: "上传附件",
    value: "upFolder",
    placeholder: "大小不能超过8M"
  },
  {
    name: "富文本",
    value: "richText",
    placeholder: "请输入内容"
  }
];
export default {
  name: "form",
  components: {
    draggable,
    TinymceEditor,
    breadcrumb
  },
  data() {
    return {
      tabNav: 1,
      city: 1, //切换表单模式 1PC 2APP
      isDragging: false,
      selectValue: "0",
      indexList: 0,
      listCurShu: 0,
      listLeft: [],
      listRight: [],
      oldleftlist: [],
      checkList: ["选中且禁用", "复选框 A"],
      navList: [
        {
          name: "基础数据表格",
          type: false,
          url: ""
        },
        {
          name: "table组件",
          type: true,
          url: ""
        }
      ],
      disabled: false,
      baseUrl: "",
      language: "zh_CN",
      skin: "oxide",
      form: {
        val: ""
      }
    };
  },
  computed: {
    dragOptions1() {
      return {
        animation: 0,
        group: {
          name: "description",
          pull: "clone"
        },
        ghostClass: "ghost", //停靠的样式
        chosenClass: "chosen" //选中的样式
      };
    },
    dragOptions2() {
      return {
        animation: 300,
        group: "description"
      };
    }
  },
  mounted() {
    tinymce.init({});
    this.listLeft = JSON.parse(JSON.stringify(dataList));
    this.listRight = JSON.parse(JSON.stringify(dataList));
  },
  methods: {
    //切换表单模式
    handleChange(val) {
      this.city = val;
    },
    //保存表单
    onSubmit() {},
    addList() {
      //  form.render();
      this.listLeft = JSON.parse(JSON.stringify(this.listLeft));
      this.listRight = JSON.parse(JSON.stringify(this.listRight));
    },
    listCur(i) {
      this.listCurShu = i;
    },
    onMove({ relatedContext, draggedContext }) {
      this.indexList = relatedContext.index;
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;

      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      );
    },
    rightStart() {
      console.log("=---list", this.oldleftlist);
      this.oldleftlist = JSON.parse(JSON.stringify(this.listLeft.concat()));
      this.isDragging = true;
    },
    rightEnd() {
      // form.render();
      console.log("--indexList", this.indexList);
      this.listCurShu = this.indexList;
      this.isDragging = false;
      //左边数据不变
      this.listLeft = JSON.parse(JSON.stringify(this.oldleftlist.concat()));
    },
    //删除队列
    delLi(index) {
      this.listRight.splice(index, 1);
    },
    toggleNav(val) {
      this.tabNav = val;
    }
  }
};
</script>
<style scoped>
@import "form.css";
</style>
